▉ 前言

這裡將利用教程所提供的"Treasure Hunter Game"來直接學習PixiJS中的語法。"Treasure Hunter Game"的程式碼 ---> Click Here !

系統提示：「Each man is the architect of his own fate.」，PixiJS青銅玩家仍卡關於現階段，僅獲得經驗提昇等級。

▉ 支線任務：讓角色行動但置中於地圖

▍任務說明

在【LV. 28】階段中完成了，讓地圖移動時限制在screen(可視範圍)之中。(codepen示範)在LV.29將要完成最後的動作，就是讓角色可以置中於畫面（除了地圖移動到可視範圍的邊界之外）

先來回顧一下前面階段任務完成的樣子：

• 【LV. 27】：
  地圖雖然會因角色的移動而移動，但充滿了bug
  

• 【LV. 28】：
  地圖會被限制於可視範圍中，因此角色即使移動到邊界，也不會看見黑邊。
  

• 【LV. 29】：
  今天的完成品如下，既不會出現黑邊，角色也會置中於screen中(地圖移動至邊界除外)。
  

▍作法 角色置中於screen

先附上完成的codepen範例。

昨天實在想了很久，騎車在想、吃飯在想，還想到晚上直接趴在桌上睡著都不知道，然後...還是沒想出來。

結果今天一早重新看過一次程式碼以及PIXI, TypeScript: Character Keyboard Movements + Screen Follow這個網頁，就突然發現問題並解出來了！

在LV. 27, LV. 28中，我們角色的x, y位置是以screen的左上角為原點作表示，所以當我們移動的x大於screen的寬度，理所當然的就會超出screen，而使我們看不到角色。（如下圖）

所以就冒出一些想法：

1. 角色針對左上角位置移動的座標必須是動態
   ---> 不能以screen的原點作為角色的移動的標準
2. map會移動、角色會移動，但是要讓角色保持置中，代表這兩個移動方式應該要是相對的
   ---> 也就是map與角色的「左上角位置」要一致

這個感覺就像是在CSS中，我們利用absolute + translate來達到垂直置中的效果一樣，必須有一個相對的基準點，而要移動的對象，就是針對這個基準點，去做絕對位置的移動。

＊＊＊

再次回顧一下，我們的screen是不會動的，會動的是角色以及map，而要讓角色置中於screen的式子，在【LV. 27】就解釋過了，這裡僅放上當時的結論圖片：

我們在沒有改變錨點的情況下，x,y位置都是相對於圖片左上角得，因此，在這裡便確定好map的左上角位置（即map的x,y位置）要改變成如下：

newMapPosX = -explorer.x + screenCenterX;
newMapPosY = -explorer.y + screenCenterY;

但是我們不希望直接把這個位置綁在spirit上，也就是那張綠色運董場的圖片之上，所以這裡作了一個重要的改變，就是設置一個container，並將map這張圖片丟到這個新建立的群組中，再將群組加到畫布上方。（container語法可參考PIXI官方教程）

mapContainer = new Container();
app.stage.addChild(mapContainer);
map = new Sprite(resources["map"].texture);
mapContainer.addChild(map); 
......其他地圖設置省略......

最後再把newMapPosX, newMapPosY賦值給mapContainer.x, mapContainer.y：

mapContainer.x = newMapPosX;
mapContainer.y = newMapPosY;

而在前面說過map與角色的「左上角位置」要一致
下圖為原先的情況：

下圖為我們希望完成的情況：

所以再來就是要改變的是角色的參考位置，但是沒辦法直接對角色這張圖片變更，否則只是在改變角色的x, y位置而已。因此這裡一樣新增一個container群組，再把角色放入群組中，去改變群組的x, y位置即可，而角色會根據群組的左上角作為（0，0）去移動。

先新增container：

explorerContainer = new Container();
app.stage.addChild(explorerContainer);
explorer = new Sprite(resources["explorer"].texture);
explorerContainer.addChild(explorer);
......其他設置省略......

接著將container群組的左上角位置作改變：

explorerContainer.x = newMapPosX;
explorerContainer.y = newMapPosY;

這麼一來就完成了！

▉ 結語

今天終於完成了讓角色置中於screen的方法，原本以為一天可以解決的，結果最後硬是拖到了第29天。

參考資料

• PixiJS 教程中文版
• PIXI, TypeScript: Character Keyboard Movements + Screen Follow